<template>
  <div class="recommend">
    <ul>
      <li v-for="item in tableData" :key="item.id" @click="handleClick(item)">
        <div class="img-box img-hover">
          <img :src="coverImg(item)" />
        </div>
        <div class="txt-box">
          <h4>{{ item.title }}</h4>
          <p>主讲：{{ item.team }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo.js'
export default {
  mixins: [setInfo],
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 4,
        courseType: 1,
        recommendId: '',
      },
      tableData: [],
    }
  },
  mounted() {
    this.listQuery.recommendId = this.$route.query.id
    this.getList()
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch(
        'queryOpenApiSysCourseRelatedRecommend',
        this.listQuery,
      )
      this.tableData = res.data
    },
    handleClick(row) {
      let routeUrl = this.$router.resolve({
        name: 'course-home-detail',
        query: { id: row.id },
      })
      window.open(routeUrl.href, '_blank')
    },
  },
}
</script>
<style scoped lang="scss">
.recommend {
  ul {
    li {
      margin-bottom: 10px;
      cursor: pointer;
      .img-box {
        float: left;
        width: 80px;
        height: 60px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #eee;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .txt-box {
        padding: 5px 0;
        margin-left: 96px;
        height: 67px;
        position: relative;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        overflow: hidden;
        h4 {
          width: 182px;
          height: 36px;
          overflow: hidden;
          font-size: 14px;
          color: #333;
          line-height: 18px;
          word-break: break-all;
          &:hover {
            color: #409eff;
          }
        }
        p {
          font-size: 12px;
          color: #999;
          height: 16px;
          line-height: 16px;
          overflow: hidden;
        }
      }
    }
  }
}
</style>